<!--
* @FileDescription: 闭锁分站关联数据
* @Author: yuec621@outlook.com
* @Date: 2025-07-31 09:52:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-23 16:08:37
-->
<template>
  <div class="pagestyle">
    <div style="background-color: rgba(255, 255, 255, 0.8);border-radius: 8px;margin-bottom: 10px;">
      <queryBox :queryList="state.options.queryList.querys" @query="query"></queryBox>
    </div>
    <div v-for="(item, index) in state.tableList" :key="index" style="height: 24%;
    margin-bottom: 10px;">
      <list_controller @pagechange="pagechange(index)" :ref="'zujianname' + index"
      :descQuery="state.descObj" :options="item" :showCaozuo="true">
        <template v-slot:selectNamelist> {{ item.label }} </template>
      </list_controller>
    </div>
 </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import queryBox from "@/components/commonCom/querybox";
import {
  computed,
  onMounted,
  reactive
} from "vue";
import {
  table_headers
} from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import dayjs from "dayjs";
import {
  searchareaTree
} from "@/api/config";
const {
  proxy
} = getCurrentInstance();
// 首页查询抽屉传值
const props = defineProps({
  fromIndexpointId: Object
})
let state = reactive({
  tableList: [{
    label: '历史断电信息',
    queryList: {
      autoSearch: true,
      querys: []
    },
    tableheads: computed(() => table_headers.callPointCutDetail),
    dataUrl: '/hisPointCut/attainCutPointDetail'
  },
  {
    label: '历史馈电信息',
    queryList: {
      autoSearch: true,
      querys: []
    },
    tableheads: computed(() => table_headers.callChangeRecord),
    dataUrl: '/hisPointSwitch/attainSwitchPointInfo'
  },
  {
    label: '历史开出口变动',
    queryList: {
      autoSearch: true,
      querys: []
    },
    tableheads: computed(() => table_headers.callControlPortChange),
    dataUrl: '/control/fault/attainControlFaultInfo'
  },
  {
    label: '历史开关量变动',
    queryList: {
      autoSearch: true,
      querys: []
    },
    tableheads: computed(() => table_headers.callChangeRecord),
    dataUrl: '/hisPointSwitch/attainSwitchPointInfo'
  }
  ],
  detailsList: [],
  tempList: [],
  fillayaComShow: false, //控制填写分析抽屉显示
  listBtnType: undefined,
  options: {
    queryList: {
      querys: [{
        fieldsearch: "conditionType",
        field: "conditionType",
        title: "查询方式",
        type: "radiospecial",
        binddata: 1,
        options: [{
          label: "时间查询",
          value: 1,
        },
        {
          label: "班次查询",
          value: 2,
        },
        ],
      },
      {
        field: ["startTime", "endTime"],
        fieldsearch: ["startTime", "endTime"],
        title: "时间范围",
        col: 12,
        type: "datetimestartEnd",
        binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss.000'), dayjs().format(
          'YYYY-MM-DD HH:mm:ss.000')],
        typespecial: 2,
        show: false,
      },
      {
        field: "datetime",
        fieldsearch: "datetime",
        title: "日期",
        type: "datetime",
        binddata: dayjs().format('YYYY-MM-DD'),
        typespecial: 1,
        show: true,
      },
      {
        fieldsearch: "banci",
        field: "banci",
        title: "班次选择",
        type: "selectspecial",
        binddata: "",
        options: [],
        typespecial: 1,
        show: true,
      },
      {
        field: "stationCode",
        title: "闭锁分站",
        type: "select",
        binddata: undefined,
        options: [],
      }
      ],
    },
    dataUrl: "/hisPointCut/listPointCuts",
  },
  editId: undefined,
  banciList: [],
  showCaozuo: true,
  data: {},
  areaObj: {
    condition: 'A'
  },
  descObj: {},
  showChart: false,
  chartData: {},
});
function pagechange(index) {
  let data = {}
  state.options.queryList.querys.forEach(item => {
    if (item.type == 'datetimestartEnd') {
      data[item.field[0]] = item.binddata[0]
      data[item.field[1]] = item.binddata[1]
    }
    if (item.type == 'stationCode') {
      data[item.field] = item.binddata
    }
    if (item.type == 'stationCode') {
      data[item.field] = item.binddata
    }
  })
  state.descObj=data
  proxy.$refs['zujianname' + index][0].getData(data);
}

function query(type) {
  let queryObj = {}
  state.options.queryList.querys.forEach(itemq => {
    if (itemq.type == 'datetimestartEnd') {
      queryObj[itemq.field[0]] = dayjs(itemq.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
      queryObj[itemq.field[1]] = dayjs(itemq.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
    } else {
      queryObj[itemq.field] = itemq.binddata
    }
  })
  state.descObj=queryObj
  if (proxy.$refs) {
    state.tableList.forEach((itemsub, index) => {
      if (index == 1) {
        queryObj.flag = 'FC'
      } else if (index == 3) {
        queryObj.flag = 'DC'
      } else {
        delete queryObj.flag
      }
      proxy.$refs['zujianname' + index][0].getData(queryObj)
    })
  }

  if (type == 2) {
    getconditionList({})
  }
  if (type.type == 5) {
    let dataObj = {
      dateSuffix: undefined,
      classInfo: {},
    };
    state.options.queryList.querys.forEach((item) => {
      if (type.val1) {
        dataObj.dateSuffix = type.val1
        if (item.fieldsearch == "banci" && type.item.type != 'datetimestartEnd') {
          state.banciList.forEach((itemsub) => {
            if (itemsub.id == item.binddata) {
              dataObj.classInfo = itemsub;
              banciList(dataObj);
            }
          });
        }
      } else {
        if (item.fieldsearch == "datetime") {
          dataObj.dateSuffix = item.binddata;
        }
      }
      if (item.fieldsearch == "banci") {
        state.banciList.forEach((itemsub) => {
          if (type.val == 0) {
            type.val = state.banciList[0].id
          }
          if (itemsub.id == type.val) {
            dataObj.classInfo = itemsub;
            dataObj.typeLabel = 2
            banciList(dataObj);
          }
        });
      }
    });
  }
}

function getbanciList() {
  axios.post("/class/info/searchAll", {}).then((res) => {
    state.banciList = res.data.list;
    state.options.queryList.querys.forEach((item) => {
      if (item.fieldsearch == "banci") {
        item.options = res.data.list.map((item) => {
          return {
            label: item.className,
            value: item.id,
          };
        });
        item.binddata = item.options[0].value
      }
    });
  });
}
getbanciList();
function banciList(dataObj) {
  axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
        if (item.type == "datetimestartEnd") {
          item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
        }
      }
    });
  });
}

function getSelList() {
  axios.post("/hisPointFeed/listAllNames", {
    flag: false
  }).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        item.options = res.data
      }
    });
  });
  searchareaTree().then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "area") {
        item.options = res.data;
      }
    });
  });
}

function getconditionList(val) {
  axios
    .post("/hisPointFeed/conditionList", val)
    .then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == "cascaderRadioSpecial") {
          item.options = res.data;
        }
      });
    });
}
getconditionList(state.areaObj)
getSelList();

const getcontrolPortsList = (val) => {
  axios.post("/station/list", {}).then((res) => {
    state.options.queryList.querys.forEach(itemsub => {
      if (itemsub.field == 'stationCode') {
        itemsub.options = res.data.list.map(item => {
          return {
            label: item.stationCode,
            value: item.stationCode
          }
        })
      }
    })
  });
};
getcontrolPortsList()
onMounted(()=>{
  let queryObj = {}
  state.options.queryList.querys.forEach(itemq => {
    if (itemq.type == 'datetimestartEnd') {
      queryObj[itemq.field[0]] = dayjs(itemq.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
      queryObj[itemq.field[1]] = dayjs(itemq.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
    } else {
      queryObj[itemq.field] = itemq.binddata
    }
  })
  state.descObj=queryObj
})

</script>

<style lang="scss" scoped>
.pagestyle {
  height: calc(100vh - 150px);
  overflow-y: auto;
}

.xiazai {
  position: absolute;
  top: 42px;
  right: 110px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;

  .item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .item:hover {
    background-color: #ececec;
  }
}

::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>